<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<meta name="format-detection" content="telephone=no">
		<title>销售任务</title>
		<link rel="stylesheet" href="../css/app-h5-common.css" />
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/iscroll.min.js"></script>
	</head>
	<style>
		html {
			font-size: 100px;
			background: #EEEEEE;
			height: auto;
		}
		
		body {
			width: 100%;
		}
		
		.task {
			width: 100%;
			min-height: 0.95rem;
			box-sizing: border-box;
			padding: 0 0.15rem;
			padding-top: 0.1rem;
			color: #212A2F;
			font-size: 0.16rem;
			line-height: 0.24rem;
			border-top: 1px solid #EEEEEE;
			background-color: #FFFFFF;
			
		}
		
		#wrapper {
			position: absolute;
			z-index: 1;
			top: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			overflow: hidden;
		}
		
		.scroller {
			position: absolute;
			z-index: 1;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			width: 100%;
			-webkit-transform: translateZ(0);
			-moz-transform: translateZ(0);
			-ms-transform: translateZ(0);
			-o-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-text-size-adjust: none;
			-moz-text-size-adjust: none;
			-ms-text-size-adjust: none;
			-o-text-size-adjust: none;
			text-size-adjust: none;
		}
		.list{
			margin: 0 auto;
			margin-top: 0.05rem;	
			overflow: hidden;
		}
		.product{
			width:49.33% ;
			font-size: 0.12rem;
			color: #212A2F;
			background: #FFFFFF;
			box-sizing: border-box;
			/*padding: 0 0.15rem;*/
			overflow: hidden;
			position: relative;
			/*padding-top: 0.15rem;*/
			float: left;
			margin-bottom: 0.05rem;
			
		}
		 
		.product .detail{
			box-sizing: border-box;
		    text-align:left;
		    padding: 0 0.15rem 0.07rem;
		   
		    
		    
		}
		.red{
			font-size: 0.14rem;
			color: #FF5D44;
			font-weight: bold;
			margin-top: 0.15rem;
			margin-bottom: 0.07rem;
		}
		.product p{
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
			line-height: 0.16rem;
		}
		.product .p1{
			margin-bottom: 0.15rem;
		}
		.product img{
			display: block;
			width: 100%; 
			margin: 0 auto;
			margin-bottom: 0.1rem;
			
		}
		.hasMargin{
			margin-right:1.34%;
		}
	</style>
	<body onload="loaded()">
		<div id="wrapper">
			<div class="scroller">
				<div class="task">
					<p>任务详情：</p>
					<p>购买此页面商品，就能得到小麦额外奖励。</p>
					<p>是现金？是积分？是实体商品？等你来发觉呦~~</p>
				</div>
				<ul class="list">
					<li class="product">
						<img src="../img/product1.jpg" />
						<div class="detail">
							<p>FENDI/芬迪 女士3Jours系列</p>
							<p class="p1">拼色小牛皮手拎包 白色</p>
							<span class="red">￥ 12500 </span>
						</div>	
					</li>    
					<li class="product">
						<img src="../img/product1.jpg" />
						<div class="detail">
							<p>FENDI/芬迪 女士3Jours系列</p>
							<p class="p1">拼色小牛皮手拎包 白色</p>
							<span class="red">￥ 12500 </span>
						</div>	
					</li>
					<li class="product">
						<img src="../img/product1.jpg" />
						<div class="detail">
							<p>FENDI/芬迪 女士3Jours系列</p>
							<p class="p1">拼色小牛皮手拎包 白色</p>
							<span class="red">￥ 12500 </span>
						</div>	
					</li>
					<li class="product">
						<img src="../img/product1.jpg" />
						<div class="detail">
							<p>FENDI/芬迪 女士3Jours系列</p>
							<p class="p1">拼色小牛皮手拎包 白色</p>
							<span class="red">￥ 12500 </span>
						</div>	
					</li>
					<li class="product">
						<img src="../img/product1.jpg" />
						<div class="detail">
							<p>FENDI/芬迪 女士3Jours系列</p>
							<p class="p1">拼色小牛皮手拎包 白色</p>
							<span class="red">￥ 12500 </span>
						</div>	
					</li>
				</ul>
			</div>
		</div>
	</body> 
	<script>
		var myScroll;
		function loaded () {
			myScroll = new IScroll('#wrapper');	
		};		
		document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
		function setMargin(){
			var items= $(".product").length;
			console.log(items)
			for (var i=0;i<items;i++) {				
				if (i%2==0) {					
					$(".product").eq(i).addClass("hasMargin")
				}
			} 
		}
		function getDeviceWidth(){
			var screenWidth=document.documentElement.clientWidth;
			if (screenWidth<375) {
				$(".task").css("font-size","0.13rem")
			}
		}
	setMargin();
	getDeviceWidth();
	</script>
</html>